Show Message

Displays a message or alert dialog to the user. Can be used for confirmations, errors, or user prompts.

---

🧩 Overview

The Show Message component provides modal dialogs or alert boxes that convey important information or require user interaction. Unlike toasters, these dialogs often require user acknowledgment before proceeding.

---

⚙️ Configuration Options

Property	Description	Required	Example
Header	The title or headline of the message dialog	Yes	"Delete Confirmation"
Message	The main content or body text displayed to the user	Yes	"Are you sure you want to delete this record?"
Timer (Ms)	Duration the message remains visible before auto-dismissal (optional)	Yes	5000 (5 seconds)

---

🔄 Usage Example

1. Display a confirmation dialog before deleting a record.
2. User reads the header and message.
3. User acknowledges or the dialog auto-dismisses after the timer expires.

---

🧪 Example Implementation (JavaScript/React)

function showMessage(header, message, duration) {
  // Example using a modal or alert dialog library
  alert({
    title: header,
    content: message,
    duration: duration,
    onOk: () => console.log("User confirmed"),
  });
}

// Usage
showMessage(
  "Delete Confirmation",
  "Are you sure you want to delete this record?",
  5000
);

---

🎨 Appearance and Behavior

• Modal dialog centered on the screen
• Typically blocks interaction until dismissed
• May include buttons like OK, Cancel, or custom actions
• Supports auto-dismiss with timer or manual close
• Customizable styles and animations

---

🧠 Best Practices

• Use clear and concise headers and messages
• Keep critical prompts (like confirmations) modal and blocking
• Use timers cautiously to avoid user confusion
• Provide explicit buttons for user actions
• Ensure dialogs are accessible (keyboard and screen reader friendly)

---

🔚 Summary

The Show Message component is vital for communicating important information that requires user focus and often a decision. Proper configuration improves clarity and user experience while preventing accidental actions.

---

Next Steps:

• Combine with Toaster for lightweight notifications
• Use Action Logs to record user confirmations or errors